<template>
  <el-card class="hotpostion">
    <div class="timer">
      <el-select v-model="someDay" placeholder="今日">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="今日热搜" name="first">
        <el-table :data="tableData1" style="width: 100%">
          <el-table-column type="index" width="50" />
          <el-table-column prop="tittle" show-overflow-tooltip label="标题" />
          <el-table-column prop="numberViews" label="点击率" width="180" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="今日热帖" name="second">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" width="50" />
          <el-table-column prop="tittle" show-overflow-tooltip label="标题" />
          <el-table-column prop="numberViews" label="点击率" width="180" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
const date = new Date()
let nowMonth = date.getMonth() + 1
let strDate = date.getDate()
var seperator = '-';
if (nowMonth >= 1 && nowMonth <= 9) {
  nowMonth = '0' + nowMonth
}
if (strDate >= 0 && strDate <= 9) {
  strDate = '0' + strDate
}
import axios from 'axios';
import mmUrl from '@/utils/utilUrl';
export default {
  data() {
    return {
      activeName: 'first',
      tableData1: [],
      tableData: [],
      someDay: '',
      options: [
        {
          value:
            date.getFullYear() + seperator + nowMonth + seperator + strDate,
          label: '今日'
        },
        {
          value: this.getFirstDayOfWeek(),
          label: '本周'
        },
        {
          value: date.getFullYear() + seperator + nowMonth,
          label: '本月'
        },
        {
          value: String(date.getFullYear()),
          label: '本年'
        }
      ]
    }
  },
  watch: {
    someDay(newd) {
      this.activeName === 'first'
        ? this.initeGetTableData(1)
        : this.activeName === 'second'
          ? this.initeGetTableData(2)
          : '';
    },
    activeName(newd) {
      this.someDay = '';
      newd === 'first'
        ? this.initeGetTableData(1)
        : newd === 'second'
          ? this.initeGetTableData(2)
          : '';
    }
  },
  mounted() {
    this.initeGetTableData(1)
    this.initeGetTableData(2)
  },
  methods: {
    getFirstDayOfWeek() {
      const Nowdate = new Date()
      let WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000)
      let d = new Date(WeekFirstDay)
      return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
    },
    initeGetTableData(res) {
      axios
        .post(mmUrl.home.get, {
          keyword: '',
          page: {
            maxResultCount: 0,
            pageNo: 0,
            pageSize: 10,
            skipCount: 0
          },
          searchTime:
            res !== 0
              ? this.someDay
                ? this.someDay
                : date.getFullYear() +
                  seperator +
                  nowMonth +
                  seperator +
                  strDate
              : '',
          type: res
        })
        .then(res1 => {
          if (res === 0) {
            this.tableData2 = res1.data.data.items.items
          } else if (res === 1) {
            this.tableData1 = res1.data.data.items.items
          } else {
            this.tableData = res1.data.data.items.items
          }
        })
    }
  }
}
</script>
<style lang="scss" scope>
.hotpostion {
  position: relative;
  .timer {
    position: absolute;
    right: 20px;
    z-index: 999;
    top: 20px;
  }
}
</style>
